<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en" ng-app="demo-app">

<head>
    <meta charset="utf-8" />
    <title>案例列表</title>
    <meta name="description" content="app, web app, responsive, responsive layout, admin, admin panel, admin dashboard, flat, flat ui, ui kit, AngularJS, ui route, charts, widgets, components" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <%--<link rel="stylesheet" href="${pageContext.request.contextPath}/static/angular/css/bootstrap.css" type="text/css" />--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/angular/css/buttons.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/multiple-select/multiple-select.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/multiple-select/demos/assets/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-fileinput/css/fileinput.min.css"/>
    <script src="${pageContext.request.contextPath}/static/angular/js/angular.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/angular/controll/demo-list.js"></script>
    <script src="${pageContext.request.contextPath}/static/multiple-select/demos/assets/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/multiple-select/multiple-select.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap-fileinput/js/locales/zh.js"></script>


    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jslib/syUtils.js"></script>

    <!-- jQuery -->
    <%--<script src="${pageContext.request.contextPath}/static/angular/vendor/jquery/jquery.min.js"></script>--%>
    <script src="${pageContext.request.contextPath}/static/angular/vendor/jquery/bootstrap.js"></script>
    <style type="text/css">
        
    </style>

    <!-- /.modal -->
    <script>
        var handleFlag;

        function clearInput() {
            $('#password').val('');
        }

        function setHandleFlag(flag) {
            handleFlag = flag;
        }

        function getScope() {
            var appElement = document.querySelector('[ng-controller=demo-ctrl]');
            //获取$scope变量
            var $scope = angular.element(appElement).scope();
            //上一行改变了msg的值，如果想同步到Angular控制器中，则需要调用$apply()方法即可
             $scope.$apply();
            //调用控制器中的getData()方法
            // console.log($scope.getData());
            return $scope;
        }


    </script>
    <script>
        $(function () { $('#addDemoModal').modal('hide')});
    </script>

    <script>
        $(function () { $('#addDemoModal').on('hide.bs.modal', function () {
            $('#addType').val('');
            $('#addBigTitle').val('');
            $('#addPriority').val('');
            $('#addIntroduction').val('');
            $('#addImage1').val('');
            $('#addImage2').val('');
            $('#addPriority').val('');
            $('#addImageUrl').fileinput('refresh');
            $('#addImageUrl2').fileinput('refresh');
        })});
    </script>

    <script>
        //初始化fileinput控件（第一次初始化）
        function initFileInput(ctrlName, uploadUrl,inputId) {
            var control = $('#' + ctrlName);

            var extra = '';
            var key = '';
            var imageUrl = '';
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                initialPreviewConfig:[],
                previewFileIcon: "<i  class='glyphicon glyphicon-king'></i>",
            }).     on("fileuploaded", function(event, data) {
                if(data.response)
                {
                    alert('上传处理成功');
                    var d = data.response['initialPreviewConfig'];
                    var d2 = d[0];
                    imageUrl = d2['caption'];

                    if (inputId == 1){
                        $('#addImage1').val(imageUrl);
                    }else if(inputId == 2){
                        $('#addImage2').val(imageUrl);
                    }else if (inputId == 3){
                        $('#editImage1').val(imageUrl);
                    }else if (inputId == 4){
                        $('#editImage2').val(imageUrl);
                    }


//                    var addImage1 = $('#addImage1').val();
//                    var addImage2 = $('#addImage2').val();
//                    var editImage1 = $('#editImage1').val();
//                    var editImage2 = $('#addImage2').val();
//
//                    alert(editImage1 +"======" + editImage2);
//
//
//                    if (((addImage1 == "") && (handleFlag == 0))){
//                        $('#addImage1').val(imageUrl);
//                    }else if((editImage1 == "") && (handleFlag == 1)){
//                        $('#editImage1').val(imageUrl);
//                    }else{
//                        if (handleFlag == 0) {
//                            $('#addImage2').val(imageUrl);
//                        }
//                        if (handleFlag == 1) {
//                            $('#editImage2').val(imageUrl);
//                        }
//                    }
//
//                    getScope().addValue = imageUrl;
//                    getScope().editValue = imageUrl;
//                    $('#addValue').val(imageUrl);
//                    $('#editValue').val(imageUrl);
//                    extra = d2['extra'];
//                    key = d2['key'];
                    //getScope().myAddImageUrl = imageUrl;

                }
            })
                .on('fileclear', function(event) {
                    var param = {};
                    param['fileName'] = key;
                    $.ajax({
                        cache: true,
                        type: "POST",
                        url : getRootPath() + "/file/delete",
                        data:  param,
                        async: false,
                        error: function(request) {
                            alert("Connection error");
                        },
                        success: function(data) {
                            $("#commonLayout_appcreshi").parent().html(data);
                            $('#addValue').val('');
                            $('#editValue').val('');
                        }
                    });
                })
        }

        $(function () {
            initFileInput("addImageUrl",getRootPath() + "/file/upload",1);
        })
    </script>


    <script>
        $(function () {
            initFileInput("addImageUrl2",getRootPath() + "/file/upload",2);
        })
    </script>

    <script>
        $(function () {
            initFileInput("editImageUrl",getRootPath() + "/file/upload",3);
        })
    </script>

    <script>
        $(function () {
            initFileInput("editImageUrl2",getRootPath() + "/file/upload",4);
        })
    </script>
</head>

<body  ng-controller="demo-ctrl" style="height: auto">

    <!--按钮组-->
    <div class="col-md-12" style="margin-bottom:20px;">
        <div class="button-group">
            <button type="button" class="button button-pill" onclick="setHandleFlag(0)" data-toggle="modal" data-target="#addDemoModal">添加</button>
        </div>
    </div>
    <!--按钮组结束-->
    <!--模态框-->
    <div class="modal fade" id="addDemoModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width: 800px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加属性</h4>
                </div>
                <div class="modal-body" style="width: 800px">
                    <form name="addForm" class="form-horizontal">
                        <div class="form-group">
                            <label for="addType" class="col-sm-1 control-label">类别</label>
                            <div class="col-sm-11">
                                <select type="text" class="form-control" id="addType" ng-model="addType">
                                    <option value="0">android/ios端</option>
                                    <option value="1">pc端</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addBigTitle" class="col-sm-1 control-label">案例名称</label>
                            <div class="col-sm-11">
                                <input type="text" class="form-control" id="addBigTitle" ng-model="addBigTitle">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addDevelopMembers" class="col-sm-1 control-label">人员</label>
                            <div class="col-sm-11">
                                <input type="text" class="form-control" id="addDevelopMembers" ng-model="addDevelopMembers">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addDevlopTime" class="col-sm-1 control-label">周期</label>
                            <div class="col-sm-11">
                                <input type="text" placeholder="单位：工作日，填入天数" class="form-control" id="addDevlopTime" ng-model="addDevlopTime">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editor" class="col-sm-1 control-label">简介</label>
                            <div class="col-sm-11">
                                <script id="editor" type="text/plain">

                                </script>
                            </div>
                        </div>
                        <div class="form-group">
                            <%--<label for="addImage1" class="col-sm-2 control-label"></label>--%>
                            <div class="col-sm-11">
                                <input type="hidden" class="form-control" id="addImage1" ng-model="addImage1" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <%--<label for="addImage2" class="col-sm-2 control-label"></label>--%>
                            <div class="col-sm-11">
                                <input type="hidden" class="form-control" id="addImage2" ng-model="addImage2" value="">
                            </div>
                        </div>
                        <div class="form-group" style="height: 500px">
                            <label for="addImageUrl" class="col-sm-1 control-label">首页图</label>
                            <div class="col-sm-11" style="height: 340px;">
                                <input id="addImageUrl" name="file" ng-model="addImageUrl" class="form-control" type="file">
                            </div>
                        </div>
                        <div class="form-group" style="height: 500px">
                            <label for="addImageUrl2" class="col-sm-1 control-label">详情图</label>
                            <div class="col-sm-11" style="height: 340px;">
                                <input id="addImageUrl2" name="file" ng-model="addImageUrl2" class="form-control" type="file">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addPriority" class="col-sm-1 control-label">排序</label>
                            <div class="col-sm-11">
                                <input type="text" class="form-control" id="addPriority" ng-model="addPriority">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-click="addDemo()">添加</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--模态框-->
    <div class="modal fade" id="editDemoModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width: 800px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改属性</h4>
                </div>
                <div class="modal-body" style="width: 800px">
                    <form name="addForm" class="form-horizontal">
                        <div class="form-group">
                            <label for="editType" class="col-sm-1 control-label">类别</label>
                            <div class="col-sm-11">
                                <select type="text" class="form-control" id="editType" ng-model="editType">
                                    <option value="0">android/ios端</option>
                                    <option value="1">pc端</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editBigTitle" class="col-sm-1 control-label">案例名称</label>
                            <div class="col-sm-11">
                                <input type="text" class="form-control" id="editBigTitle" ng-model="editBigTitle">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editDevelopMembers" class="col-sm-1 control-label">人员</label>
                            <div class="col-sm-11">
                                <input type="text" class="form-control" id="editDevelopMembers" ng-model="editDevelopMembers">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editDevlopTime" class="col-sm-1 control-label">周期</label>
                            <div class="col-sm-11">
                                <input type="text" placeholder="单位：工作日，填入天数" class="form-control" id="editDevlopTime" ng-model="editDevlopTime">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editorForUpdate" class="col-sm-1 control-label">简介</label>
                            <div class="col-sm-11">
                                <script id="editorForUpdate" type="text/plain">

                                </script>
                            </div>
                        </div>
                        <div class="form-group">
                            <%--<label for="editImage1" class="col-sm-2 control-label"></label>--%>
                            <div class="col-sm-11">
                                <input type="hidden" class="form-control" id="editImage1" ng-model="editImage1" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <%--<label for="editImage2" class="col-sm-2 control-label"></label>--%>
                            <div class="col-sm-11">
                                <input type="hidden" class="form-control" id="editImage2" ng-model="editImage2" value="">
                            </div>
                        </div>
                        <div class="form-group" style="height: 500px">
                            <label for="editImageUrl" class="col-sm-1 control-label">首页图</label>
                            <div class="col-sm-11" style="height: 340px;">
                                <input id="editImageUrl" name="file" ng-model="editImageUrl" class="form-control" type="file">
                            </div>
                        </div>
                        <div class="form-group" style="height: 500px">
                            <label for="editImageUrl2" class="col-sm-1 control-label">详情图</label>
                            <div class="col-sm-11" style="height: 340px;">
                                <input id="editImageUrl2" name="file" ng-model="editImageUrl2" class="form-control" type="file">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editPriority" class="col-sm-1 control-label">排序</label>
                            <div class="col-sm-11">
                                <input type="text" class="form-control" id="editPriority" ng-model="editPriority">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-click="editDemo()">修改</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--展示模态框-->
    <div class="modal fade" id="showIntroduction" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width: 800px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">简介</h4>
                </div>
                <div class="modal-body">
                    <p id="viewIntroduction"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--图片模态框-->
    <div class="modal fade" id="showModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width: 800px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">图片</h4>
                </div>
                <div class="modal-body">
                    <img id="myImage" src="" style="width:750px "/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


    <!--表格-->
    <div class="col-md-12" style="height: 100%">
        <div class="panel panel-default">
            <div class="panel-heading">列表</div>
            <div class="panel-body">
                <table class="table table-hover ">
                    <tr>
                        <th>ID</th>
                        <th>类别</th>
                        <th>案例名称</th>
                        <th>周期</th>
                        <th>人员</th>
                        <th>简介</th>
                        <th>图1</th>
                        <th>图2</th>
                        <th>排序</th>
                        <th>操作</th>
                    </tr>
                    <tr ng-repeat="item in demoList">
                        <td>
                            {{ $index + 1 + ((page.cpage-1) * 10)}}
                        </td>
                        <td>{{item.type | typeFilter}}</td>
                        <td>{{item.bigTitle}}</td>
                        <td>{{item.devlopTime}}</td>
                        <td>{{item.developMembers}}</td>
                        <td  ng-click="viewIntroduction(item.introduction)">{{item.introduction | subIntroduction}}</td>
                        <td ng-click="showPic(item.imageUrl)">点击看图</td>
                        <td ng-click="showPic(item.imageUrlMain)">点击看图</td>
                        <td>{{item.priority}}</td>
                        <td>
                            <button type="button" class="button button-action button-box" data-toggle="modal" data-target="#editDemoModal" onclick="setHandleFlag(1)"  ng-click="setDemoInfo(item)"><i class="glyphicon glyphicon-edit"></i></button>
                            <button class="button button-caution button-box" ng-click="deleteDemo(item.id)"><i class="glyphicon glyphicon-trash"></i></button>
                        </td>
                    </tr>
                   
                </table>
            </div>

        </div>
        <div class="col-md-12">
            <div style="float: left;">
                <span>共{{page.count}}条记录 ，当前第{{page.cpage}}页/共{{page.totalnum}}页</span>
            </div>
            <div style="float: right;">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li ng-click="pageclick('«')">
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li ng-class="{'active':page.cpage == item}" ng-repeat="item in page.pagenum" ng-click="pageclick(item)"><a  href="#" ng-bind="item"></a></li>
                        
                        <li ng-click="pageclick('»')">
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 配置文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('editor');

        function getContent() {
            var params = {};
            params['introduction'] = UE.getEditor('editor').getContent()
            return params
        }

        function setContent(detail) {
            ue.setContent(detail);
        }

        var ueForUpdate = UE.getEditor('editorForUpdate');

        function getContentForUpdate() {
            var params = {};
            params['introduction'] = UE.getEditor('editorForUpdate').getContent()
            return params
        }

        function setContentForUpdate(detail) {
            ueForUpdate.setContent(detail);
        }
    </script>
</body>

</html>
